<script setup>
import { queryDetail } from '@/api/system/operLog'
import dayjs from 'dayjs'

const props = defineProps({
  id: {
    type: String,
    default: ''
  },
  visible: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['update:visible'])

const formRef = ref()
const pageData = reactive({
  treeData: []
})
const formData = reactive({
  title: '',
  businessType: '',
  status: 0
})

const resetForm = () => {
  formRef.value?.resetFields()
  emit('update:visible')
  delete(formData.id)
}
const submitBtnLoading = ref(false)
const editLoading = ref(false)
watch(
  () => props.visible,
  async (newValue, oldValue) => {
    if (newValue) {
      const { id } = props
      if (id) {
        const { data } = await queryDetail(id)
        Object.assign(formData, data)
      }
    }
  }
)
defineExpose({
  submitBtnLoading
})
</script>

<template>
  <el-dialog
    :close-on-click-modal="false"
    v-model="visible"
    title="查看详情"
    @close="resetForm"
    width="35%"
    :align-center="true"
  >
    <el-form v-loading="editLoading" ref="formRef" :model="formData" label-width="80px">

          <el-col :span="24">
            <el-form-item label="业务类型" prop="businessType">
              <div v-if="formData.businessType === 0">其它</div>
              <div v-if="formData.businessType === 1">新增</div>
              <div v-if="formData.businessType === 2">修改</div>
              <div v-if="formData.businessType === 3">删除</div>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="请求方式" prop="requestMethod">
              {{ formData.requestMethod }}
            </el-form-item>
          </el-col>

        <el-col :span="24">
          <el-form-item label="主机地址" prop="operIp">
            {{ formData.operIp }}
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="操作状态" prop="status">
            <div v-if="formData.status === 0">正常</div>
            <div v-else-if="formData.status === 1">失败</div>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="操作日期" prop="operTime">
            {{ formData.operTime ? dayjs(formData.operTime).format('YYYY-MM-DD HH:mm:ss') : '' }}
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="操作方法" prop="method">
            {{ formData.method }}
          </el-form-item>
        </el-col>

      <el-col :span="24">
        <el-form-item label="请求参数" prop="operParam">
          {{ formData.operParam }}
        </el-form-item>
      </el-col>

      <el-col :span="24">
        <el-form-item label="返回参数" prop="operParam" v-if="formData.status === 0">
          {{ formData.jsonResult }}
        </el-form-item>
      </el-col>

      <el-col :span="24">
        <el-form-item label="错误消息" prop="operParam" v-if="formData.status === 1">
          {{ formData.errorMsg }}
        </el-form-item>
      </el-col>

    </el-form>
    <template #footer>
      <el-button @click="visible = false">取消</el-button>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
:deep(.el-tree) {
  width: 100%;
}
.el-scrollbar {
  width: 100%;
}
</style>
